<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>停车场表管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="停车场表后台服务中心"/>
    <meta content="" name="GaoXiang"/>
    <th:block th:replace="body/head-page :: dva_head_page"/>
</head>

<body>
<div id="allmap" style="width: 900px;height: 500px;"></div>


<th:block th:replace="body/javascript-page :: javascript_page"/>
<!--<script type="text/javascript" th:src="@{http://api.map.baidu.com/api(v=3.0,ak='OxRexgnx8cb0rsimlYs9HSIYTR6bK7At')}"></script>-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=OxRexgnx8cb0rsimlYs9HSIYTR6bK7At"></script>
<script type="text/javascript">

    let map ;

    (function(){
        initMapInfo();

        initEvent();
    })(document);
    function initMapInfo(){
        // 百度地图API功能
        map = new BMap.Map("allmap");
        let cityName = '[[${cityName}]]';

        let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        let top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        let top_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
        }); //右上角，仅包含平移和缩放按钮
        /*缩放控件type有四种类型:
        BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

        if (cityName != null && cityName != ""){
            map.centerAndZoom(cityName, 11);      // 用城市名设置地图中心点
        }else {
            map.centerAndZoom("北戴河", 11);      // 用城市名设置地图中心点
        }
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

        centerset();
    }

    function initEvent(){

        //单击获取点击的经纬度
        map.addEventListener("click", function (e) {

            let allOverlay = map.getOverlays();
            for (let i = 0; i < allOverlay.length; i++) {
                map.removeOverlay(allOverlay[i]);
            }
            let point = new BMap.Point(e.point.lng, e.point.lat);
            map.centerAndZoom(point, 11);
            let marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中

            // parent.$('#address').text(e.point.lng+","+e.point.lat);
            // parent.$("#lnglat").val(e.point.lng+","+e.point.lat);
            parent.$("#longitude").val(e.point.lng);
            parent.$("#latitude").val(e.point.lat);

        });
    }

    function centerset(){

        let lng = '[[${longitude}]]';
        let lat = '[[${latitude}]]';

        // 用经纬度设置地图中心点
        if (lng != null && lng != "" && lat != null && lat != "") {
            map.clearOverlays();
            let new_point = new BMap.Point(lng, lat);
            let marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            // parent.$("#address").val($("#longitude").val()+","+$("#latitude").val());
            parent.$("#longitude").val(e.point.lng);
            parent.$("#latitude").val(e.point.lat);
        }else {
            map.clearOverlays();
            let new_point = new BMap.Point(117.032638,36.619204);//济南
            let marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            // parent.$("#address").val(117.032638+","+36.619204);
            parent.$("#longitude").val(117.032638);
            parent.$("#latitude").val(36.619204);
        }
    }




</script>

</body>
</html>